/* 
    Document   : estilos
    Created on : 8/05/2014, 03:01:17 PM
    Author     : maospina
    Description:
        Purpose of the stylesheet follows.
*/

#contenido{
    width: 100%;
}

body{
    background-image: url('../imagen/fondo1.jpg');
}

 .tabs { /* es el rectángulo contenedor */
        margin: 10px;
        min-height: 200px;
        position: relative;
        width: 98.5%;
        height: 570px;
        
        }
        .tab { /* cada una de las pestañas */
        float: left;
        }
        .tab label { /* la parte superior con el título de la pestaña */
        /*color pestaña*/
        background-color: #BDBDBD;
        border-radius: 5px 5px 0 0;
        /*letra color*/
        color: white;
        cursor: pointer;
        left: 0;
        margin-right: 1px;
        padding: 5px 15px;
        position: relative;
        }
        /* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
        .tab [type=radio] { display: none; }

        /* el contenido de las pestañas */
        .content {
            background-color: transparent;
            bottom: 0;
            left: 0;
            overflow: hidden;
            padding: 20px;
            position: absolute;
            right: 0;
            top: 23px;
            border-radius: 10px;
            
        }
        /* y un poco de animación */
        .content > * {
        opacity: 0;

        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        -o-transform: translateX(-100%);

        -moz-transition: all 0.6s ease;
        -webkit-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        }

        /* controlamos la pestaña activa */
        [type="radio"]:checked ~ label {
        background-color: #D8D8D8;
        box-shadow: 0 3px 2px #89A inset;
        color: white;
        z-index: 1;
        }
        [type=radio]:checked ~ label ~ .content { z-index: 1; }
        [type=radio]:checked ~ label ~ .content > * {
        opacity: 1;
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        -ms-transform: translateX(0);
        }
        
        #rusuarios{
            padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #rusuarios2{
            padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #titulos{
            padding:20px 20px 20px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe)); background:#e8eaeb;
        }
        
        #contenidou{
            overflow-y: scroll;
            height: 230px;
        }
        
        #botoneria{
            overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #filas{
            padding:0.5px 5px 0.5px; text-align:left;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
        }
        
        #filas2{
            padding:0.5px 5px 0.5px; text-align:left;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, whitesmoke, whitesmoke);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
        }
        
        #filas3{
            padding:0.5px 5px 0.5px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
        }
        
        #filas4{
            background-color: whitesmoke;padding:5px 5px 5px; text-align:center;border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
        }
        
        #conte{
            padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #tusu{
            padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #seleccion{
            width: 600px;
            height: 168px;
            margin-top: -35px;
        }
        
        #programacion{
            width: 600px;
            height: 200px;
        }
        
        #progr{
            height: 215px;padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #seleccion{
            margin-top: -1px;height: 168px;padding: 10px;width:600px;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #selec{
            padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        
        #listase{
            overflow-y: scroll;
            height: 100px;
        }
        
        #seleccion2{
            margin-top: -1px;padding: 5px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:#fefefe;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #turs{
            padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:transparent;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #turs2{
            padding: 10px;width:100%;overflow:hidden;border:1px solid #d3d3d3;background:whitesmoke;width:100%;-moz-border-radius:5px; /* FF1+ */-webkit-border-radius:5px; /* Saf3-4 */border-radius:5px;-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        
        #cju{
            width: 100%;
            height: 430px;
            overflow-y: scroll;
        }